import React from "react";
// import PropTypes from "prop-types";
import { connect } from "react-redux";

import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  DeviceEventEmitter,
  Platform,
  PermissionsAndroid,
} from "react-native";
import { getMultiplPermissions, checekPermissions } from "utils";

import Iconfont from "../Iconfont/index";

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    flexDirection: "row",
    // backgroundColor: "white",
    // paddingHorizontal: 20,
    // marginTop: 55,
    // paddingBottom: 15,
    // marginHorizontal: 20,
    padding: 16,
    // backgroundColor: ColorBackgroundComp,
  },

  searchBar: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    // borderRadius: 16,
    // overflow: "hidden",
    // backgroundColor: ColorBackground,
    // paddingLeft: 10,
    // height: 26,
  },
  placeholder: {
    marginLeft: 10,
    color: "#84889B",
    fontSize: 16,
  },
});

/**
 * 首页顶部搜索栏
 */
class HomeTopSearch extends React.Component {
  constructor(props) {
    super(props);
    const data = this.init();

    this.state = {
      dataSource: data,
    };
  }

  componentDidMount() {
    this.listener = DeviceEventEmitter.addListener("NoticeUpdateLocale", () => {
      // 这里面是要调用的方法，比如：刷新
      const data = this.init();
      this.setState({ dataSource: data });
    });
  }

  componentWillUnmount() {
    this.listener.remove();
  }

  init = () => {
    const data = {
      searchPlaceholder: global.lang.home.searchPlaceholder,
    };
    return data;
  };

  handleAddClick = () => {
    // const { showPop } = this.state;
    // this.menuModal.setShow(!showPop);
    // this.setState({ showPop: !showPop });
  };

  render() {
    const { test } = this.props;
    const { dataSource } = this.state;
    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => {
            test();
          }}
          style={{ flex: 1, height: 26 }}
        >
          <View style={styles.searchBar}>
            <Iconfont name="search" type="icon" size={18} color="#28354C" />
            <Text style={styles.placeholder}>
              {dataSource.searchPlaceholder}
            </Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            if (Platform.OS === "android") {
              checekPermissions(
                PermissionsAndroid.PERMISSIONS.RECORD_AUDIO
              ).then(res => {
                // 未授权，调用授权待用户确认
                if (!res) {
                  // 获取读取存储卡权限，读取用户相册需要
                  getMultiplPermissions([
                    PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
                  ]).then(resInner => {
                    const CAMERA = resInner["android.permission.RECORD_AUDIO"];
                    if (CAMERA === "granted") {
                      const { navigation } = this.props;
                      navigation.navigate("AudioSearch");
                    }
                  });
                } else {
                  const { navigation } = this.props;
                  navigation.navigate("AudioSearch");
                }
              });
            } else {
              const { navigation } = this.props;
              navigation.navigate("AudioSearch");
            }
          }}
        >
          <View>
            <Iconfont name="voice" type="icon" size={22} color="#298CF7" />
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

// HomeTopSearch.propTypes = {
//   onFocus: PropTypes.func,
//   onLeftIconClick: PropTypes.func,
//   onRightIconClick: PropTypes.func,
// };

// HomeTopSearch.defaultProps = {
//   onFocus: () => {},
//   onLeftIconClick: () => {},
//   onRightIconClick: () => {},
// };

export default connect(stores => ({
  data: stores.home,
  community: stores.community,
}))(HomeTopSearch);
